﻿<!DOCTYPE html>
<html>
  <head>
    <title>产品页面设计文档</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/产品页面设计文档/styles.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/产品页面设计文档/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (矩形) -->
      <div id="u0" class="ax_default _一级标题">
        <div id="u0_div" class=""></div>
        <div id="u0_text" class="text ">
          <p><span>产品页面设计说明</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u1" class="ax_default _文本段落">
        <div id="u1_div" class=""></div>
        <div id="u1_text" class="text ">
          <p><span>产品面向的主要人群是盲人和志愿者，通过该产品，志愿者（正常人）可以视频电话帮助盲人所看不见的东西，为他们分辨事物，促进美好生活。</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u2" class="ax_default _文本段落">
        <div id="u2_div" class=""></div>
        <div id="u2_text" class="text ">
          <p style="font-size:16px;"><span>细分首屏页面</span></p><p style="font-size:13px;"><span><br></span></p><p style="font-size:13px;"><span>1.展示的所有信息：</span></p><p style="font-size:13px;"><span>1）图片(内含志愿者和盲人人数的显示）</span></p><p style="font-size:13px;"><span>2）用户注册时间</span></p><p style="font-size:13px;"><span>3）接听电话操作</span></p><p style="font-size:13px;"><span>4）采用的语言</span></p><p style="font-size:13px;"><span>5）标签</span></p><p style="font-size:13px;"><span>6）通知</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u3" class="ax_default box_1">
        <div id="u3_div" class=""></div>
        <div id="u3_text" class="text ">
          <p><span>产品</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u4" class="ax_default box_1">
        <div id="u4_div" class=""></div>
        <div id="u4_text" class="text ">
          <p><span>主页</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u5" class="ax_default box_1">
        <div id="u5_div" class=""></div>
        <div id="u5_text" class="text ">
          <p><span>故事</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u6" class="ax_default box_1">
        <div id="u6_div" class=""></div>
        <div id="u6_text" class="text ">
          <p><span>设置</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u7" class="ax_default _文本段落">
        <div id="u7_div" class=""></div>
        <div id="u7_text" class="text ">
          <p><span>展示志愿者和盲人的数量，用户注册的时间，语言，如何接受电话，和通知的功能。</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u8" class="ax_default _文本段落">
        <div id="u8_div" class=""></div>
        <div id="u8_text" class="text ">
          <p><span>展示志愿者或盲人的优质内容，可以让更多用户了解他们对生活的追求和热爱。</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u9" class="ax_default _文本段落">
        <div id="u9_div" class=""></div>
        <div id="u9_text" class="text ">
          <p><span>包含个人资料，使用的语言，密码，隐私条款等内容。</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u10" class="ax_default box_1">
        <div id="u10_div" class=""></div>
        <div id="u10_text" class="text ">
          <p><span>学习如何接听电话</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u11" class="ax_default box_1">
        <div id="u11_div" class=""></div>
        <div id="u11_text" class="text ">
          <p><span>故事</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u12" class="ax_default box_1">
        <div id="u12_div" class=""></div>
        <div id="u12_text" class="text ">
          <p><span>个人资料</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u13" class="ax_default box_1">
        <div id="u13_div" class=""></div>
        <div id="u13_text" class="text ">
          <p><span>语言</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u14" class="ax_default box_1">
        <div id="u14_div" class=""></div>
        <div id="u14_text" class="text ">
          <p><span>支持与反馈</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u15" class="ax_default _文本段落">
        <div id="u15_div" class=""></div>
        <div id="u15_text" class="text ">
          <p><span>点击故事卡片，即可欣赏该内容的详情。</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u16" class="ax_default _文本段落">
        <div id="u16_div" class=""></div>
        <div id="u16_text" class="text ">
          <p><span>编辑个人资料或密码。</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u17" class="ax_default _文本段落">
        <div id="u17_div" class=""></div>
        <div id="u17_text" class="text ">
          <p><span>编辑使用的主要语言或其他语言。</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u18" class="ax_default _文本段落">
        <div id="u18_div" class=""></div>
        <div id="u18_text" class="text ">
          <p><span>链接第三方观看其内容。</span></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u19" class="ax_default _连接线">
        <img id="u19_seg0" class="img " src="images/产品页面设计文档/u19_seg0.png" alt="u19_seg0"/>
        <div id="u19_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u20" class="ax_default _连接线">
        <img id="u20_seg0" class="img " src="images/产品页面设计文档/u20_seg0.png" alt="u20_seg0"/>
        <img id="u20_seg1" class="img " src="images/产品页面设计文档/u20_seg1.png" alt="u20_seg1"/>
        <img id="u20_seg2" class="img " src="images/产品页面设计文档/u20_seg2.png" alt="u20_seg2"/>
        <div id="u20_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u21" class="ax_default _连接线">
        <img id="u21_seg0" class="img " src="images/产品页面设计文档/u21_seg0.png" alt="u21_seg0"/>
        <img id="u21_seg1" class="img " src="images/产品页面设计文档/u21_seg1.png" alt="u21_seg1"/>
        <img id="u21_seg2" class="img " src="images/产品页面设计文档/u21_seg2.png" alt="u21_seg2"/>
        <div id="u21_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u22" class="ax_default _连接线">
        <img id="u22_seg0" class="img " src="images/产品页面设计文档/u22_seg0.png" alt="u22_seg0"/>
        <div id="u22_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u23" class="ax_default _连接线">
        <img id="u23_seg0" class="img " src="images/产品页面设计文档/u23_seg0.png" alt="u23_seg0"/>
        <div id="u23_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u24" class="ax_default _连接线">
        <img id="u24_seg0" class="img " src="images/产品页面设计文档/u22_seg0.png" alt="u24_seg0"/>
        <div id="u24_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u25" class="ax_default _连接线">
        <img id="u25_seg0" class="img " src="images/产品页面设计文档/u25_seg0.png" alt="u25_seg0"/>
        <div id="u25_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u26" class="ax_default _连接线">
        <img id="u26_seg0" class="img " src="images/产品页面设计文档/u22_seg0.png" alt="u26_seg0"/>
        <div id="u26_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u27" class="ax_default _连接线">
        <img id="u27_seg0" class="img " src="images/产品页面设计文档/u27_seg0.png" alt="u27_seg0"/>
        <div id="u27_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u28" class="ax_default _连接线">
        <img id="u28_seg0" class="img " src="images/产品页面设计文档/u28_seg0.png" alt="u28_seg0"/>
        <img id="u28_seg1" class="img " src="images/产品页面设计文档/u28_seg1.png" alt="u28_seg1"/>
        <img id="u28_seg2" class="img " src="images/产品页面设计文档/u28_seg2.png" alt="u28_seg2"/>
        <div id="u28_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u29" class="ax_default _连接线">
        <img id="u29_seg0" class="img " src="images/产品页面设计文档/u29_seg0.png" alt="u29_seg0"/>
        <img id="u29_seg1" class="img " src="images/产品页面设计文档/u29_seg1.png" alt="u29_seg1"/>
        <img id="u29_seg2" class="img " src="images/产品页面设计文档/u29_seg2.png" alt="u29_seg2"/>
        <div id="u29_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u30" class="ax_default label">
        <div id="u30_div" class=""></div>
        <div id="u30_text" class="text ">
          <p><span>一级页面</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u31" class="ax_default label">
        <div id="u31_div" class=""></div>
        <div id="u31_text" class="text ">
          <p><span>展示内容</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u32" class="ax_default label">
        <div id="u32_div" class=""></div>
        <div id="u32_text" class="text ">
          <p><span>二级页面</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u33" class="ax_default label">
        <div id="u33_div" class=""></div>
        <div id="u33_text" class="text ">
          <p><span>展示内容</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u34" class="ax_default _文本段落">
        <div id="u34_div" class=""></div>
        <div id="u34_text" class="text ">
          <p><span>点击按钮，即可进入模拟场景，有相关的语言提示操作，点击屏幕中央即可退出学习操作。</span></p>
        </div>
      </div>

      <!-- Unnamed (水平线) -->
      <div id="u35" class="ax_default line">
        <img id="u35_img" class="img " src="images/产品页面设计文档/u35.png"/>
      </div>

      <!-- Unnamed (垂直线) -->
      <div id="u36" class="ax_default line">
        <img id="u36_img" class="img " src="images/产品页面设计文档/u36.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u37" class="ax_default _文本段落">
        <div id="u37_div" class=""></div>
        <div id="u37_text" class="text ">
          <p><span>十字法构建信息层级</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u38" class="ax_default _文本段落">
        <div id="u38_div" class=""></div>
        <div id="u38_text" class="text ">
          <p><span>通知</span></p><p><span>接听电话操作</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u39" class="ax_default box_1">
        <div id="u39_div" class=""></div>
        <div id="u39_text" class="text ">
          <p><span>重要必须的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u40" class="ax_default box_1">
        <div id="u40_div" class=""></div>
        <div id="u40_text" class="text ">
          <p><span>重要不必须的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u41" class="ax_default box_1">
        <div id="u41_div" class=""></div>
        <div id="u41_text" class="text ">
          <p><span>必须不重要的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u42" class="ax_default box_1">
        <div id="u42_div" class=""></div>
        <div id="u42_text" class="text ">
          <p><span>不重要不必须</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u43" class="ax_default _文本段落">
        <div id="u43_div" class=""></div>
        <div id="u43_text" class="text ">
          <p><span>图片（内含志愿者和盲人人数的显示）</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u44" class="ax_default _文本段落">
        <div id="u44_div" class=""></div>
        <div id="u44_text" class="text ">
          <p><span>采用的语言</span></p><p><span>标签</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u45" class="ax_default _文本段落">
        <div id="u45_div" class=""></div>
        <div id="u45_text" class="text ">
          <p><span>版式布局设计安排分析</span></p><p><span><br></span></p><p><span>主页面：卡片式呈现，可以清晰地了解内容，且凸显出“学习如何接听电话”该按钮功能，让用户点击进去了解。</span></p><p><span><br></span></p><p><span>故事页面：卡片式瀑布流，一个单独的卡片让人清楚地了解到是一个故事内容的呈现，点击进去，是该内容的展示，也成瀑布流展示。</span></p><p><span><br></span></p><p><span>设置页面：有线框设置，更好地划分区域内容的布局，让用户更好地编辑或查看内容。</span></p>
        </div>
      </div>
    </div>
  </body>
</html>
